<!doctype html>
<!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF8" />
    <title>Vis Network | Data | Importing from Gephi (JSON)</title>

    <meta name="example-screenshot-selector" content="body" />

    <script
      type="text/javascript"
      src="../../../standalone/umd/vis-network.min.js"
    ></script>

    <script
      type="text/javascript"
      src="https://unpkg.com/alea@1.0.0/alea.js"
    ></script>

    <style type="text/css">
      #mynetwork {
        width: 800px;
        height: 800px;
        border: 1px solid lightgray;
      }

      div.nodeContent {
        position: relative;
        border: 1px solid lightgray;
        width: 480px;
        height: 780px;
        margin-top: -802px;
        margin-left: 810px;
        padding: 10px;
      }

      pre {
        padding: 5px;
        margin: 5px;
      }

      .string {
        color: green;
      }

      .number {
        color: darkorange;
      }

      .boolean {
        color: blue;
      }

      .null {
        color: magenta;
      }

      .key {
        color: red;
      }
    </style>
  </head>

  <body>
    <h2>Dynamic Data - Importing from Gephi (JSON)</h2>

    <div style="width: 700px; font-size: 14px; text-align: justify">
      This example shows how to import a JSON file exported by Gephi. The two
      options available for the import are available through the checkboxes. You
      can download the Gephi JSON exporter here:
      <a
        href="https://marketplace.gephi.org/plugin/json-exporter/"
        target="_blank"
        >https://marketplace.gephi.org/plugin/json-exporter/</a
      >. All of Gephi's attributes are also contained within the node elements.
      This means you can access all of this data through the DataSet.
      <br />
    </div>

    <p>
      <label
        ><input type="checkbox" id="fixed" checked="checked" /> Fix in place
        after import.</label
      ><br />
      <label
        ><input type="checkbox" id="parseColor" /> Parse the color instead of
        copy (adds borders, highlights etc.)</label
      >
    </p>

    <div id="mynetwork"></div>
    <div class="nodeContent">
      <h4>Node Content:</h4>
      <pre id="nodeContent"></pre>
    </div>

    <script type="module">
      var nodes = new vis.DataSet();
      var edges = new vis.DataSet();
      var gephiImported;
      var fixedCheckbox = document.getElementById("fixed");
      fixedCheckbox.onchange = redrawAll;

      var parseColorCheckbox = document.getElementById("parseColor");
      parseColorCheckbox.onchange = redrawAll;

      var nodeContent = document.getElementById("nodeContent");

      var container = document.getElementById("mynetwork");
      var data = {
        nodes: nodes,
        edges: edges,
      };
      var options = {
        nodes: {
          shape: "dot",
          font: {
            face: "Tahoma",
          },
        },
        edges: {
          width: 0.15,
          smooth: {
            type: "continuous",
          },
        },
        interaction: {
          tooltipDelay: 200,
          hideEdgesOnDrag: true,
        },
        physics: {
          stabilization: false,
          barnesHut: {
            gravitationalConstant: -10000,
            springConstant: 0.002,
            springLength: 150,
          },
        },
      };

      globalThis.network = new vis.Network(container, data, options);
      globalThis.network.on("click", function (params) {
        if (params.nodes.length > 0) {
          var data = nodes.get(params.nodes[0]); // get the data from selected node
          nodeContent.innerText = JSON.stringify(data, undefined, 3); // show the data in the div
        }
      });

      /**
       * This function fills the DataSets. These DataSets will update the network.
       */
      function redrawAll(gephiJSON) {
        if (gephiJSON.nodes === undefined) {
          gephiJSON = gephiImported;
        } else {
          gephiImported = gephiJSON;
        }

        nodes.clear();
        edges.clear();

        var fixed = fixedCheckbox.checked;
        var parseColor = parseColorCheckbox.checked;

        var parsed = vis.parseGephiNetwork(gephiJSON, {
          fixed: fixed,
          parseColor: parseColor,
        });

        // add the parsed data to the DataSets.
        nodes.add(parsed.nodes);
        edges.add(parsed.edges);

        var data = nodes.get(2); // get the data from node 2 as example
        nodeContent.innerText = JSON.stringify(data, undefined, 3); // show the data in the div
        globalThis.network.fit(); // zoom to fit
      }

      try {
        const { default: gephiJSON } = await import(
          "../datasources/WorldCup2014.json",
          { with: { type: "json" } }
        );
        redrawAll(gephiJSON);
      } catch (error) {
        console.error(error, "Import of Gephi JSON failed");
      }
    </script>
  </body>
</html>
